<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伴侣管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'partner': '#8B5CF6',
                        'partner-light': '#F3F4F6'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <!-- Header -->
    <div class="bg-white shadow-sm border-b border-gray-200">
        <div class="flex items-center justify-between px-4 py-3">
            <div class="flex items-center">
                <i class="fas fa-arrow-left text-gray-600 mr-3"></i>
                <h1 class="text-lg font-semibold text-gray-900">伴侣管理</h1>
            </div>
            <i class="fas fa-cog text-gray-600"></i>
        </div>
    </div>

    <!-- Main Content -->
    <div class="p-4 space-y-6">
        <!-- Partner Status Card -->
        <div class="bg-gradient-to-r from-partner to-purple-500 rounded-xl p-4 text-white">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-lg font-semibold">伴侣状态</h2>
                <i class="fas fa-users text-xl"></i>
            </div>
            <div class="flex items-center">
                <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-user text-white"></i>
                </div>
                <div>
                    <div class="font-medium">小美</div>
                    <div class="text-sm opacity-90">已连接 15天</div>
                </div>
                <div class="ml-auto">
                    <div class="w-3 h-3 bg-green-400 rounded-full"></div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="grid grid-cols-2 gap-3">
            <button class="bg-white rounded-lg p-4 shadow-sm border border-gray-200 text-center">
                <i class="fas fa-comments text-partner text-2xl mb-2"></i>
                <div class="text-sm font-medium text-gray-900">私密聊天</div>
            </button>
            <button class="bg-white rounded-lg p-4 shadow-sm border border-gray-200 text-center">
                <i class="fas fa-sync-alt text-partner text-2xl mb-2"></i>
                <div class="text-sm font-medium text-gray-900">同步数据</div>
            </button>
        </div>

        <!-- Shared Goals -->
        <div class="bg-white rounded-lg p-4 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <h3 class="font-semibold text-gray-900">共同目标</h3>
                <i class="fas fa-plus text-partner"></i>
            </div>
            <div class="space-y-3">
                <div class="flex items-center justify-between p-3 bg-partner-light rounded-lg">
                    <div class="flex items-center">
                        <i class="fas fa-heart text-partner mr-3"></i>
                        <div>
                            <div class="text-sm font-medium text-gray-900">提升性生活质量</div>
                            <div class="text-xs text-gray-500">目标: 满意度达到8分以上</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-sm font-medium text-partner">75%</div>
                        <div class="text-xs text-gray-500">进行中</div>
                    </div>
                </div>
                <div class="flex items-center justify-between p-3 bg-partner-light rounded-lg">
                    <div class="flex items-center">
                        <i class="fas fa-calendar text-partner mr-3"></i>
                        <div>
                            <div class="text-sm font-medium text-gray-900">每周约会时间</div>
                            <div class="text-xs text-gray-500">目标: 每周至少2次约会</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-sm font-medium text-green-600">100%</div>
                        <div class="text-xs text-gray-500">已完成</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Shared Data -->
        <div class="bg-white rounded-lg p-4 shadow-sm">
            <h3 class="font-semibold text-gray-900 mb-3">共享数据</h3>
            <div class="space-y-3">
                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
                    <div class="flex items-center">
                        <i class="fas fa-chart-line text-partner mr-3"></i>
                        <div>
                            <div class="text-sm font-medium text-gray-900">性健康评估</div>
                            <div class="text-xs text-gray-500">双方评估结果对比</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <span class="text-xs text-gray-500 mr-2">已共享</span>
                        <i class="fas fa-check-circle text-green-500"></i>
                    </div>
                </div>
                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
                    <div class="flex items-center">
                        <i class="fas fa-calendar-alt text-partner mr-3"></i>
                        <div>
                            <div class="text-sm font-medium text-gray-900">约会记录</div>
                            <div class="text-xs text-gray-500">共同约会时间安排</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <span class="text-xs text-gray-500 mr-2">已共享</span>
                        <i class="fas fa-check-circle text-green-500"></i>
                    </div>
                </div>
                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
                    <div class="flex items-center">
                        <i class="fas fa-lock text-gray-400 mr-3"></i>
                        <div>
                            <div class="text-sm font-medium text-gray-900">私密记录</div>
                            <div class="text-xs text-gray-500">仅自己可见</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <span class="text-xs text-gray-500 mr-2">未共享</span>
                        <i class="fas fa-times-circle text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activities -->
        <div class="bg-white rounded-lg p-4 shadow-sm">
            <h3 class="font-semibold text-gray-900 mb-3">最近活动</h3>
            <div class="space-y-3">
                <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                    <div class="w-8 h-8 bg-partner-light rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-heart text-partner text-sm"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm text-gray-900">小美完成了性健康评估</div>
                        <div class="text-xs text-gray-500">2小时前</div>
                    </div>
                </div>
                <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                    <div class="w-8 h-8 bg-partner-light rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-calendar text-partner text-sm"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm text-gray-900">你们共同设定了新目标</div>
                        <div class="text-xs text-gray-500">1天前</div>
                    </div>
                </div>
                <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                    <div class="w-8 h-8 bg-partner-light rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-comments text-partner text-sm"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm text-gray-900">小美发送了一条私密消息</div>
                        <div class="text-xs text-gray-500">3天前</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Privacy Settings -->
        <div class="bg-white rounded-lg p-4 shadow-sm">
            <h3 class="font-semibold text-gray-900 mb-3">隐私设置</h3>
            <div class="space-y-3">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-sm font-medium text-gray-900">数据同步</div>
                        <div class="text-xs text-gray-500">自动同步共享数据</div>
                    </div>
                    <div class="relative">
                        <input type="checkbox" class="sr-only" id="sync-toggle" checked>
                        <label for="sync-toggle" class="block w-12 h-6 bg-partner rounded-full cursor-pointer">
                            <span class="block w-5 h-5 bg-white rounded-full transform translate-x-6 transition-transform"></span>
                        </label>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-sm font-medium text-gray-900">消息通知</div>
                        <div class="text-xs text-gray-500">接收伴侣消息提醒</div>
                    </div>
                    <div class="relative">
                        <input type="checkbox" class="sr-only" id="notification-toggle" checked>
                        <label for="notification-toggle" class="block w-12 h-6 bg-partner rounded-full cursor-pointer">
                            <span class="block w-5 h-5 bg-white rounded-full transform translate-x-6 transition-transform"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Navigation -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-2">
            <div class="flex flex-col items-center">
                <i class="fas fa-home text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400 mt-1">首页</span>
            </div>
            <div class="flex flex-col items-center">
                <i class="fas fa-heart text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400 mt-1">性健康</span>
            </div>
            <div class="flex flex-col items-center">
                <i class="fas fa-users text-partner text-lg"></i>
                <span class="text-xs text-partner mt-1">伴侣</span>
            </div>
            <div class="flex flex-col items-center">
                <i class="fas fa-comments text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400 mt-1">社区</span>
            </div>
            <div class="flex flex-col items-center">
                <i class="fas fa-user text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400 mt-1">我的</span>
            </div>
        </div>
    </div>
</body>
</html> 